import React from "react";
import "./style.css";
import { Image } from "react-vant";
class ListIttem extends React.Component {
  handleSell = (sell) => {
    if (sell < 1000) return sell;
    if (sell > 1000 && sell < 10000) return (sell / 1000).toFixed(1) + "千";
    return (sell / 10000).toFixed(1) + "万";
  };
  render() {
    const { title, sell, image, price } = this.props;
    return (
      <dl className="list-item">
        <dt>
          <Image
            src={image}
            alt=""
            lazyload={{
              placeholder: <div style={{ width: 180, height: 120 }}></div>,
            }}
            style={{ width: 180, height: 120 }}
          />
        </dt>
        <dd>
          <h3>{title}</h3>
          <div className="bottom">
            <span>单价：¥{price}元</span>
            <span>销量：{this.handleSell(sell)}</span>
          </div>
        </dd>
      </dl>
    );
  }
}

export default ListIttem;
